<template>
  <div v-if="!showEdit">
    <Card>
      <p slot="title">
        用户列表
      </p>
      <div  class="search-con search-con-right">
        <Input @on-change="handleClear" clearable placeholder="输入用户姓名搜索" v-model="userName"/>
        <Button @click="getAccounts(1)" class="search-btn" type="primary"><Icon type="search"/>搜索</Button>
        <Button @click="handleEdit" class="search-btn" type="primary">新增</Button>
      </div>
      <q-table 
        :columns="columns" 
        :loading="loading" 
        :tableData="tableData"
        :operate="operate"
        :totalRow="totalRow"
        :pageNo="pageNo"
        @pageChange="getAccounts"
      />
    </Card>
  </div>
  <account-edit v-else 
    @editClose="editClose"
    :editUserAcctId="editUserAcctId"
    ></account-edit>
</template>
<script>
import { mapActions } from 'vuex'
import QTable from '_c/base/q-table'
import account from '@/api/sys/account'
import AccountEdit from './AccountEdit'
export default {
  components:{
    QTable,
    AccountEdit
  },
  data(){
    return{
      showEdit: false,
      editUserAcctId: '',
      userName: '',
      pageNo: 1,
      totalRow: 0,
      userRolemap:{},
      loading: false,
      tableData: [],
      columns:[
        {title: '用户姓名', key: 'USER_NAME'},
        {title: '用户账号', key: 'LOGIN_ACCOUNT'},
        {title: '用户角色', key: 'ROLE_NAME'},
        {title: '所属部门', key: 'DEPT_NAME'},
        {title: '联系电话', key: 'USER_TELE'},
        {title: '操作时间', key: 'CREATE_TIME',width:150},
      ],
      operate: [
        {name: '编辑', type: 'success', func: 'handleEdit'},
        {name: '删除', type: 'error', func: 'handleDelete'}
      ]
    }
  },
  async created(){
    this.getAccounts(1)
	},
	computed:{
		
	},
  methods:{
    handleClear(){

    },
    handleEdit(item){
      //this.$Message.info(",---"+item.user_acct_id)
      //this.$router.push({name:'accountEdit',params:{userAcctId: item.user_acct_id}});
      this.editUserAcctId = item.USER_ACCT_ID
      this.showEdit = true
    },
    editClose(refresh){
      this.showEdit = false
      if(refresh){
        this.getAccounts(1)
      }
    },
    handleDelete(item){
      this.$Modal.confirm({
        title: '确认',
        content: '您确认要删除该信息吗？',
        onOk: async () => {
          //this.delete(params.row[this.delFiledValue]);
         
          const res = await account.deleteAccount(item.USER_ACCT_ID)
          if (res.data.success){
            this.$Message.success('删除成功')
            this.getAccounts(1)
          }
          //console.log('data--',res)
        },
        onCancel: () => {
            
        }
      });
    },
    // ...mapActions([
    //   'getList'
    // ]),
    async getAccounts(pageNo){
      this.pageNo = pageNo
      this.loading = true
      let data = await account.getAccountList(pageNo, this.userName);
      data = data.data
      this.tableData = data.data.result
      this.loading = false
      //alert(data.data.data.totalRow)
      this.totalRow = data.data.totalRow
      //console.log('------------result---',data)
      //console.log('---------res---',data.data)
    },
		
    nextPage(page){
      this.pageNo = page
      this.getAccoutData()

    },
    /*
    getAccoutData(){
      this.$fetch('sys/accountList',{
        userName:this.formInline.user,
        pageNo:this.pageNo,
        pageSize:10
      })
      .then(result=>{
        var res = result
        console.log('accountList=',res)
        this.loading = false
        if(res.success){
          this.data = res.data.result
          this.userRolemap = res.userRolemap,
          this.totalRow = res.data.totalRow
        }
        console.log('res',res)
      })
    },
    */
    edit(){
      this.$router.push({name:'userEdit',params:{userAcctId:''}});
    }
  }
}
</script>
<style lang="css" >

</style>